{% extends "templates/main_template.html.j2" %}

{% import "macros/select_options.html.j2" as SELECT_OPTIONS %}
{% import "macros/modal_confirmation.html.j2" as CONFIRMATION %}


{% block title %}
  {%- if target_workflow -%}
    {{ target_workflow.caption|e }} · Рабочий процесс · Farado
  {%- else -%}
    Новый рабочий процесс · Farado
  {%- endif -%}
{% endblock %}

{% set active_menu = 'workflows' %}
{% set tab_menu = [
  ['Описание процесса', 'properties'],
  ['Состояния', 'states'],
  ['Переходы между состояниями', 'edges'],
] %}


{#----------------------------------------------------------------------------#}
{% block styles %}
  <link href="/static/css/page-toolbar.css" rel="stylesheet" type="text/css" />
  {{ SELECT_OPTIONS.STYLES() }}
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block breadcrumb %}
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">
      {% if target_workflow %}
        {{ target_workflow.caption|e }}
      {% else %}
        Новый рабочий процесс
      {% endif %}
    </li>
  </ol>
{% endblock %}


{#----------------------------------------------------------------------------#}
{# Таб 1 — Описание процесса #}
{% block tab_content_1 %}
  <form class="row g-3 mt-4" action="/workflows/workflow" method="post">

    {# -- Workflow.id -- #}
      <div class="col-12">
        <label for="inputId" class="form-label">Идентификатор</label>
        <input
            type="text"
            name="target_workflow_id"
            class="form-control"
            id="inputId"
            value="{{ target_workflow.id }}"
            readonly>
      </div>
    {# -- /Workflow.id -- #}

    {# -- Workflow.caption -- #}
      <div class="col-12">
        <label for="inputCaption" class="form-label">Название</label>
        <input
            type="text"
            name="target_workflow_caption"
            class="form-control"
            id="inputCaption"
            value="{{ target_workflow.caption|e }}"
            required>
      </div>
    {# -- /Workflow.caption -- #}

    {# -- Workflow.description -- #}
      <div class="col-12">
        <label for="textareaDescription" class="form-label">Описание</label>
        <textarea
            name="target_workflow_description"
            class="form-control"
            id="textareaDescription"
            rows="9">
          {{- target_workflow.description|e -}}
        </textarea>
      </div>
    {# -- /Workflow.description -- #}

    <div class="col-12">
      <div class="clearfix">
        {% if target_workflow %}
          {# -- Кнопка: удалить -- #}
            {{ CONFIRMATION.BUTTON(
                caption = '<i class="bi bi-trash"></i> Удалить',
                title = 'Удалить данный рабочий процесс',
                class = 'btn btn-danger ml-3 float-start',
                target = 'remove_workflow_confirmation_'
                    + target_workflow.id|string)
            }}
            {{ CONFIRMATION.MODAL_WINDOW(
                title = 'Удаление рабочего процесса',
                text = 'Вы уверены, что хотите навсегда удалить рабочий процесс «'
                    + target_workflow.caption|e
                    + '»?',
                action_button_href = '/workflows/remove_workflow/'
                    + target_workflow.id|string,
                action_button_text = 'Да',
                window_id = 'remove_workflow_confirmation_'
                    + target_workflow.id|string)
            }}
          {# -- /Кнопка: удалить -- #}
        {% endif %}

        {# -- Кнопка: сохранить -- #}
          <button
              type="submit"
              id="saveButton"
              class="btn btn-success float-end">
            <i class="bi bi-save"></i> Сохранить
          </button>
        {# -- /Кнопка: сохранить -- #}
      </div>
    </div>

  </form>
{% endblock tab_content_1 %}


{#----------------------------------------------------------------------------#}
{# Таб 2 — Состояния #}
{% block tab_content_2 %}
  {% if target_workflow %}
    <div class="col-12">
      <div class="page-toolbar d-flex justify-content-between align-items-center container-button">
        <h5>Состояния</h5>
        {# FIXME : If you add a new state, all workflow changes on this page are discarded. #}
        <a  href="/workflows/add_state?target_workflow_id={{ target_workflow.id }}"
            class="btn btn-outline-primary btn-sm"
            type="submit">
          <i class="bi bi-plus mr-1"></i> Добавить состояние
        </a>
      </div>

      <table class="table mt-4">
        <thead class="table-dark">
          <tr>
            <th scope="col" style="width: 1%">#</th>
            <th scope="col">Название</th>
            <th scope="col">Описание</th>
            <th scope="col">Вес</th>
            <th scope="col">Порядок</th>
            <th scope="col">Архив</th>
            <th scope="col" style="width: 1%"></th>
          </tr>
        </thead>
        <tbody>
          {% for state in project_manager.ordered_states_by_workflow_id(target_workflow.id) %}
            <tr id="state_row_{{ state.id }}">
              <form id="state_form_{{ state.id }}" action="/workflows/save_state" method="post">
                <th scope="row">{{ state.id }}</th>

                {#- Название -#}
                  <td>
                    <input
                        type="text"
                        name="target_state_caption"
                        class="form-control form-select-sm"
                        value="{{ state.caption|e }}"
                        required>
                  </td>
                {#- /Название -#}

                {#- Описание -#}
                  <td>
                    <textarea
                        name="target_state_description"
                        class="form-control form-select-sm"
                        rows="1">{{ state.description|e }}</textarea>
                  </td>
                {#- /Описание -#}

                {#- Вес -#}
                  <td>
                    <input
                        type="number"
                        min=0
                        max=100
                        name="target_state_weight"
                        class="form-control form-select-sm"
                        value="{{ state.weight_percentage() }}"
                        required>
                  </td>
                {#- /Вес -#}

                {#- Порядок -#}
                  <td>
                    <input
                        type="number"
                        min=0
                        max=1024
                        name="target_state_order"
                        class="form-control form-select-sm"
                        value="{{ state.order }}"
                        required>
                  </td>
                {#- /Порядок -#}

                {#- Архив -#}
                  <td>
                    <div class="form-check">
                      <input
                          class="form-check-input"
                          name="target_state_is_archive"
                          type="checkbox"
                          id="check_is_archive"
                          {% if state.is_archive %}checked{% endif %}>
                    </div>
                  </td>
                {#- /Архив -#}

                {#- Элементы управления -#}
                  <td>
                    <div style="white-space: nowrap">
                      <input type="hidden" name="target_state_id" value="{{ state.id }}">
                      <input type="hidden" name="target_workflow_id" value="{{ target_workflow.id }}">

                      <!-- State.save() -->
                      {#- Сохранить -#}
                        <a href="#" onclick="$('#state_form_{{ state.id }}').submit();">
                          <span class="badge bg-primary">
                            <i class="bi bi-check"></i>
                          </span>
                        </a>
                      {#- /Сохранить -#}

                      {#- Удалить -#}
                        <a href="/workflows/remove_state?target_workflow_id=
                                {{- target_workflow.id -}}&target_state_id=
                                {{- state.id -}}"
                            title="Удалить состояние">
                          <span class="badge bg-danger">
                            <i class="bi bi-trash"></i>
                          </span>
                        </a>
                      {#- /Удалить -#}
                    </div>
                  </td>
                {#- /Элементы управления -#}
              </form>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
{% endblock tab_content_2 %}


{#----------------------------------------------------------------------------#}
{# Таб 3 — Переходы между состояниями #}
{% block tab_content_3 %}
  {% if target_workflow %}
    <div class="col-12">
      <div class="page-toolbar d-flex justify-content-between align-items-center container-button">
      <h5>Переходы</h5>
        {# FIXME : If you add a new edge, all workflow changes on this page are discarded. #}
        <a  href="/workflows/add_edge?target_workflow_id={{ target_workflow.id }}"
            class="btn btn-outline-primary btn-sm" type="submit">
          <i class="bi bi-plus mr-1"></i>Добавить переход
        </a>
      </div>

      <table class="table mt-4">
        <thead class="table-dark">
          <tr>
            <th scope="col" style="width: 1%">Id</th>
            <th scope="col">Из</th>
            <th scope="col">В</th>
            <th scope="col" style="width: 1%"></th>
          </tr>
        </thead>
        <tbody>
          {% for edge in project_manager.edges_by_workflow_id(target_workflow.id) %}
            <tr id="edge_row_{{ edge.id }}">
              <form id="edge_form_{{ edge.id }}" action="/workflows/save_edge" method="post">
                <th scope="row">{{ edge.id }}</th>
                <td>
                  <!-- Edge.from_state -->
                  {{ SELECT_OPTIONS.INPUT_SINGLE(
                      data_source = 'target_workflow_states',
                      name = 'target_edge_from_state_id',
                      project_manager = project_manager,
                      selected_id = edge.from_state_id,
                      data_source_id = target_workflow.id)
                  }}
                </td>
                <td>
                  <!-- Edge.to_state -->
                  {{ SELECT_OPTIONS.INPUT_SINGLE(
                      data_source = 'target_workflow_states',
                      name = 'target_edge_to_state_id',
                      project_manager = project_manager,
                      selected_id = edge.to_state_id,
                      data_source_id = target_workflow.id)
                  }}
                </td>
                <td>
                  <div style="white-space: nowrap">
                    <input type="hidden" name="target_edge_id" value="{{ edge.id }}">
                    <input type="hidden" name="target_workflow_id" value="{{ target_workflow.id }}">

                    <!-- Edge.save() -->
                    <a href="#" onclick="$('#edge_form_{{ edge.id }}').submit();">
                      <span class="badge bg-primary">v</span>
                    </a>

                    <!-- Edge.remove() -->
                    <a  href="/workflows/remove_edge?target_workflow_id={{ target_workflow.id }}&target_edge_id={{ edge.id }}"
                        title="Remove edge">
                      <span class="badge bg-danger">x</span>
                    </a>
                  </div>
                </td>
              </form>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
{% endblock tab_content_3 %}


{#----------------------------------------------------------------------------#}
{% block scripts %}
  {{ SELECT_OPTIONS.SCRIPTS() }}
{% endblock %}
